<template>
  <BaseTable
    ref="baseTableRef"
    :apiUrl="byHostToVmList"
    :otherParams="id"
    isPadding0
    :isShowAddBtn="false"
    placeholder="请输入名称"
    :columns="columns"
    height="calc(100vh - 237px)"
  >
    <!-- @handleEditOrAdd="$refs.addOrEditRef.open(record)" -->
    <template #name="{ record }">
      <ga-link>{{ record.name }}</ga-link>
    </template>
    <template #action="{ record }">
      <ga-link>编辑</ga-link>
      <ga-link status="danger">删除</ga-link>
    </template>
  </BaseTable>
  <!-- <addOrEdit ref="addOrEditRef" @fetchData="$refs.baseTableRef.fetchData()" /> -->
</template>

<script setup>
import { ref, defineEmits, defineExpose, h } from "vue";
import { render } from "@/utils";
import usageRate from "common/usageRate.vue";
import { byHostToVmList } from "@/api/hostMgt";

defineProps({
  id: {
    type: Number,
    default: "",
  },
});
const emits = defineEmits(["handleSubmit"]);
defineExpose({});
// const handleTabChange = (tab) => {
//   emits('handleTabChange', tab)
// }
const columns = [
  {
    title: "名称123",
    slotName: "name",
    tooltip: true,
    ellipsis: true,
  },
  {
    title: "子网数量",
    dataIndex: "type",
    tooltip: true,
    ellipsis: true,
    render,
  },
  {
    title: "虚拟机数量",
    dataIndex: "type",
    width: 200,
    render,
  },
  {
    title: "关联宿主机",
    dataIndex: "type",
    tooltip: true,
    ellipsis: true,
    render,
  },
  {
    title: "类型",
    dataIndex: "type",
    tooltip: true,
    ellipsis: true,
    render,
  },
  {
    title: "vlanId",
    dataIndex: "storage",
    tooltip: true,
    ellipsis: true,
    width: 160,
    render,
  },
  {
    title: "同步时间",
    dataIndex: "storage",
    tooltip: true,
    ellipsis: true,
    width: 160,
    render,
  },
  {
    title: "操作",
    width: 120,
    dataIndex: "action",
    fixed: "right",
    slotName: "action",
  },
];
</script>

<style lang="scss" scoped></style>
